<template>
  <div>
    <content-wrapper
      :tableList="tableList"
      :searchList="searchList"
      :setting="setting"
      @changeOpt="changeOpt"
      @changeTable="changeTable"
      @formValue="formValue"
      @batch="batch"
    >
      <div slot="searchLeft">
        <a-button type="primary" style="margin-right: 20px" @click="showModal">
          <a-icon type="plus" />
          新增
        </a-button>
        <a-button
          type="danger"
          style="margin-right: 20px"
          :disabled="selectDelInfo.length === 0"
          @click="batchDel"
        >
          <a-icon type="delete" />
          删除
        </a-button>
        <a-button type="primary" style="margin-right: 20px" @click="exportFile">
          <a-icon type="cloud-download" />
          导出
        </a-button>
      </div>
      <add-modal
        :editInfo="editInfo"
        :visible="visible"
        :editBoxState="editBoxState"
        @handleCancel="handleCancel"
      ></add-modal>
    </content-wrapper>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
export default {
  name: "index",
  components: {
    contentWrapper: () => import("@/components/contentWrapper/index"),
    addModal: () => import("@/views/banner/add")
  },
  data() {
    return {
      visible: false,
      tableList: {
        needSelect: true,
        columns: [
          {
            title: "ID",
            dataIndex: "id"
          },
          {
            title: "Banner图",
            dataIndex: "pic",
            width: 100,
            type: "img",
            scopedSlots: { customRender: "pic" }
          },
          {
            title: "标题",
            dataIndex: "text",
            width: 350,
            type: "title",
            scopedSlots: { customRender: "text" }
          },
          {
            title: "跳转链接",
            dataIndex: "url",
            width: 350,
            scopedSlots: { customRender: "bannerLink" }
          },
          {
            title: "状态",
            dataIndex: "status",
            align: "center",
            type: "deactivate",
            activeIndex: "1",
            scopedSlots: { customRender: "status" }
          },
          {
            title: "创建时间",
            dataIndex: "create_time"
          },
          {
            title: "操作",
            dataIndex: "opt",
            width: 120,
            type: "btn",
            list: [
              {
                ath: "editBannerList",
                label: "编辑",
                extraValue: "redact",
                className: "text-green divider"
              },
              {
                ath: "delBannerList",
                label: "删除",
                extraValue: "delete",
                className: "text-danger"
              }
            ],
            scopedSlots: { customRender: "opt" }
          }
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0
        },
        sorter: {}
      },
      searchList: [
        {
          type: "input",
          label: "关键字",
          placeholder: "关键字",
          name: "title"
        }
      ],
      setting: {},
      searchInfo: {
        title: ""
      },
      editInfo: {},
      editBoxState: 0, //编辑弹出框状态，0为新增框，1为编辑框
      selectDelInfo: []
    };
  },
  methods: {
    batch(value) {
      this.selectDelInfo = value;
    },
    handleCancel(isFresh) {
      if (isFresh) {
        this.getInfo();
      }
      this.visible = false;
    },
    changeTable(pagination) {
      Object.assign(this.tableList.pagination, pagination);
      this.getInfo();
    },
    formValue(values) {
      this.tableList.pagination.current = 1;
      Object.assign(this.searchInfo, values);
      this.getInfo();
    },
    showModal() {
      this.editBoxState = 0;
      this.editInfo = {};
      this.visible = true;
    },
    exportFile() {
      let url = this.$api.downloadBannerList;
      if (this.searchInfo.title) {
        url += "&title=" + this.searchInfo.title;
      } else {
        url += "&title=";
      }
      url +=
        "&excel_download=1&token=" +
        this.$crypto.getAES(localStorage.getItem("token"));
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    changeOpt(item, type) {
      switch (type) {
        case "redact":
          this.redact(item);
          break;
        case "delete":
          this.del(item);
      }
    },
    redact(data) {
      this.editInfo = JSON.parse(JSON.stringify(data));
      this.$set(this.editInfo, "upload", [
        {
          uid: "1",
          status: "done",
          url: this.$api.picPre + this.editInfo.pic,
          name: this.editInfo.title,
          response: {
            key: this.editInfo.pic
          }
        }
      ]);
      this.editBoxState = 1;
      this.visible = true;
    },
    batchDel() {
      let that = this;
      Modal.confirm({
        title: "您确定删除banner吗？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$ajax
            .post(that.$api.batchDelBannerList, {
              ids: that.selectDelInfo.join(",")
            })
            .then(() => {
              that.selectDelInfo = [];
              that.$notification.success({
                message: "删除成功"
              });
              that.getInfo();
            })
            .catch(err => {
              that.$notification.error({
                message: err
              });
            });
        }
      });
    },
    del(item) {
      let that = this;
      Modal.confirm({
        title: "您确定删除该banner吗？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$ajax
            .post(that.$api.delBannerList, {
              id: item.id,
              type: 2
            })
            .then(() => {
              that.$notification.success({
                message: "删除成功"
              });
              that.getInfo();
            })
            .catch(err => {
              that.$notification.error({
                message: err
              });
            });
        }
      });
    },
    getInfo() {
      this.$ajax
        .get(this.$api.getBannerList, {
          page_size: this.tableList.pagination.pageSize,
          page: this.tableList.pagination.current,
          title: this.searchInfo.title
        })
        .then(res => {
          this.tableList.dataSource = res.data;
          this.tableList.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
